
@import "../_mixin";

.user-auto{

	color:#ffffff;
	header{
		position: relative;

	    background-color: $primaryColor;
	}


	ul{
		&.ranking{

			li{
				color:#4d4d4d;
				line-height: 1.5rem;
				height:1.5rem;
				border-bottom:0.05rem solid #e0e0e0;
				margin-left:0.25rem;

				&.on{
					color:$mainColor;
				}
				span{
					display: inline-block;


					&.mobile{
						@include font-dpr(16px);
					}

					&.other{
						float:right;
						margin-right:0.25rem;
						@include font-dpr(13px);
					}

					&.val{
						float:right;
						@include font-dpr(19px);
					}

					&.rank, &.time{
						display: block;
						height:0.75rem;
						line-height:0.75rem;
					}
					&.time{
						line-height:0.5rem;
						color:#808080;
					}
				}
			}
		}
	}
	dd{
		i{
			position: absolute;
			@include font-dpr(18px);
			top:0;
			left:0;
			padding: 0.4rem;
		}
	}


	.title{
		text-align: center;
		@include font-dpr(20px);
		padding: 0.4rem;
	}

	.sub{
		dd{
			span{
				div{
					margin-right: 0.25rem!important;
				}
			}
		}
	}

	button{

		&.obtn{
		    display: block;
		    padding: 0.266667rem 0;
		    text-align: center;
		    color: #fff;
		    border: none;
		    -webkit-appearance: none;
		    background-color: #fe7140;
		    margin: 0.25rem;
		    width: 95%;
		    border-radius: 0.1rem;
		    margin-top:0.5rem;
		    @include font-dpr(20px)
		}

	}

	dl{
		&.first{
			dd{
				border:none;
			}
		}
		&.space{
			background: white;
			dd{
				margin-left:0.375rem;
				padding-left:0.0rem;
				text-indent: 0.0rem;

			}
		}
	}

	.com, .sub{
		@include font-dpr(15px);
		dt, dd{
			line-height: 1.25rem;
			text-indent: 0.35rem;
		}
		dt{
			background: #f0f0f0;
			color:#808080;
		}

		dd{
			display: block;
			height:1.25rem;

			position: relative;
			color:#404040;
			background: #ffffff;
			border-bottom:0.05rem solid #e0e0e0;
			transition: 0.1s;

			overflow: hidden;

			&:active{
				background: #f1f1f1;
			}
			input{
				width: 100%;
			    border: none;
			    line-height: 0.75rem;
			    margin-left:0.0rem;
			    padding-left:0.0rem;
			    text-align: left;
			    color:#808080;
			}

			input::-webkit-input-placeholder{
				text-indent: 0.0rem;
				margin-left:0.0rem;
				padding:0.0rem;
			}

			select{
				width: 96%;
			    line-height: 0.75rem;
			    height:1.0rem;
			    margin-left:0.0rem;
			    padding-left:0.0rem;
			    text-align: left;
			    color:#808080;
			    border:none;
			    background: #ffffff;

			}

			.title{
				@include font-dpr(16px);
				padding:0.0rem;
			}

			.content{
				color:#b3b3b3;

			}

			&.activated{
				span{
					&.content{
						i.yes{
							color:$mainColor;
							@include fz(30px);
						}
					}
				}
			}

			&.noline{
				border-bottom: none;
			}

			span{

				&.title{
					float:left
				}

				&.content{
					float:right;
					margin-right:0.25rem;
					position: relative;

					width: 70%;
					text-align: right;

					.status{
						position: absolute;
						top:0.0rem;
						right:1.5rem;
						width:1.5rem;
					}

					i.go{
						right:0rem;
						padding:0.0rem;
						left:auto;
						color:#999999;

					}

					i.yes{
						right:0rem;
						padding:0.0rem;
						left:auto;
						@include font-dpr(22px);
						color:#ffffff;
					}



					div{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 92%;
						margin-right: 0.75rem;
						white-space:nowrap;
						&.hl{
							color:$mainColor;
							@include font-dpr(18px);
						}
					}

				}
			}
		}
	}



}
.chk_3{
    display: none;
}


.chk_3 + label {
	background-color: #fafbfa;
	padding: 0.225rem;
	border-radius: 1.25rem;
	display: inline-block;
	position: relative;

	-webkit-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
    width: 1.35rem;
    height: 0.7rem;

    margin-top: 0.25rem;
    margin-right: 0rem;

    position: absolute;
    right:0;
}

.chk_3  + label:after {
	content: ' ';
	position: absolute;
	top: 0;
	-webkit-transition: box-shadow 0.1s ease-in;
	transition: box-shadow 0.1s ease-in;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 2.5rem;
	box-shadow: inset 0 0 0 0 #eee, 0 0 0.05rem rgba(0,0,0,0.4);
}



.chk_3  + label:before {
	content: ' ';
	position: absolute;
	background: white;
    top: 0.015rem;
    left: 0.03rem;
	z-index: 20;
	width: 0.675rem;
	height: 0.675rem;
	-webkit-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	border-radius: 2.5rem;
	box-shadow: 0 0.125rem 0.05rem rgba(0,0,0,0.05), 0 0px 0.05rem rgba(0,0,0,0.3);
}

.chk_3:active + label:after {
	box-shadow: inset 0 0 0 0.5rem #eee, 0 0 0.025rem #eee;
}

.chk_3:active + label:before {
	width: 0.925rem;
}

.chk_3:checked:active + label:before {
	width: 0.925rem;
	left: 0.5rem;
}

.chk_3  + label:active {
	box-shadow: 0 0.025rem 0.05rem rgba(0,0,0,0.05), inset 0px 0.025rem 0.075rem rgba(0,0,0,0.1);
}

.chk_3:checked + label:before {
	content: ' ';
	position: absolute;
	left: 0.65rem;
	border-radius: 2.5rem;
}

.chk_3:checked + label:after {
	content: ' ';
	font-size: 1.5em;
	position: absolute;
	background: $primaryColor;
	box-shadow: 0 0 0.025rem #4cda60;
}
